{% extends base %}

{% block head %}

<style type="text/css">
    .option-td {
        width: 25%;
        text-align: left;
    }

    .date-td {
        width: 25%;
        text-align: right;
    }

    .card-row {
        padding-left: 20px;
    }
</style>

{% end %}

{% block body %}
    {% from xutils import dateutil %}


    <div class="card btn-line-height">
        <div class="card-title">
            <span>我的笔记</span>
            <div class="float-right">
                <a class="btn" href="/note/add">新建</a>
                {% if show_back == "true" %}
                    {% include common/button/back_button.html %}
                {% else %}
                    <a class="btn btn-default" href="/note/tools">工具</a>
                {% end %}
            </div>
        </div>
    </div>

    {% include note/card/note_date_picker.html %}

    <div class="card">
        {% for date, children in notes_by_date %}
            <div class="card-title">
                <span>{{date}}</span>
            </div>

            {% for note_temp in children %}

                <a class="list-link" href="{{note_temp.url}}">
                    
                    {% if note_temp.priority>0 %}
                        <i class="fa fa-thumb-tack black"></i>
                    {% end %}

                    <!-- 图标和标题 -->
                    <i class="fa {{note_temp.icon}} fa-{{note_temp.icon}} black"></i>                
                    <span>{{note_temp.name}}</span>
                    <div class="float-right">
                        <span class="book-size-span">{{note_temp.badge_info}}</span>
                        <i class="fa fa-chevron-right"></i>
                    </div>
                </a>

            {% end %}
        {% end %}
    </div>

<script>
    $(function () {
        function formatDate(year, month) {
            if (month == "0") {
                return year;
            }
            if (month < 10) {
                return year + "-0" + month;
            }
            return year + "-" + month;
        }
        $("select").change(function (e) {
            var year = $("[name=year]").val();
            var month = $("[name=month]").val();
            var date = formatDate(year, month);
            location.href = "?date=" + date;
        });


        function getPrevMonth(year, month) {
            if (month > 1) {
                return formatDate(year, month - 1);
            } else {
                return formatDate(year - 1, 12);
            }
        }

        function getNextMonth(year, month) {
            if (month < 12) {
                return formatDate(year, month + 1);
            } else {
                return formatDate(year + 1, 1);
            }
        }

        function getCurrentMonth() {
            var year  = parseInt("{{year}}");
            var month = parseInt("{{month}}");
            return formatDate(year, month);
        }


        function updateMonthLink() {
            var year  = parseInt("{{year}}");
            var month = parseInt("{{month}}");

            var prevMonth = getPrevMonth(year, month);
            var nextMonth = getNextMonth(year, month);

            $(".prev-month-link").attr("href", "?date=" + prevMonth);
            $(".next-month-link").attr("href", "?date=" + nextMonth);
        }

        var date = getCurrentMonth();

        // 刷新链接
        updateMonthLink();
    })
</script>

{% end %}

{% block aside %}
    {% include note/component/mod_aside.html %}
{% end %}
